<template>
  <el-dialog
      v-model="ledgerDetailWinDialogVisible"
      title="设备详情"
      width="60%"
      @close="handleClose"
      draggable
      center
  >
    <template #default>
      <el-descriptions>
        <el-descriptions-item label="设备编码:">{{ ledger.ledgerEncode }}</el-descriptions-item>
        <el-descriptions-item label="设备名称:">{{ ledger.ledgerName }}</el-descriptions-item>
        <el-descriptions-item label="品牌:">{{ ledger.ledgerBrand }}</el-descriptions-item>
        <el-descriptions-item label="设备分类:">
          <el-tag type="success" v-if="ledger.ledgerType == 0">家用</el-tag>
          <el-tag type="success" v-else-if="ledger.ledgerType == 1">军用</el-tag>
          <el-tag type="success" v-else-if="ledger.ledgerType == 2">企业</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="规格型号:">
          <div v-html="ledger.ledgerModel"></div>
        </el-descriptions-item>
        <el-descriptions-item label="所属车间:">
          <el-tag type="primary" v-if="ledger.ledgerWorkshop == 0">家用车间</el-tag>
          <el-tag type="success" v-else-if="ledger.ledgerWorkshop == 1">军用车间</el-tag>
          <el-tag type="info" v-else>企业车间</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注:">
          <div v-html="ledger.ledgerRemark"></div>
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from "vue";
import ledgerRequest from "@/api/ledger.js";
// 申明组件的属性
const props = defineProps(['ledgerId']);
const emits = defineEmits(['cancelDetail'])
let ledgerDetailWinDialogVisible = ref(false);
// 详情对象
let ledger = ref({})

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  emits("cancelDetail");
}
function loadLedgerById() {
  ledgerRequest.selectById(props.ledgerId, res => {
    if (res.data) {
      ledger.value = res.data;
      ledgerDetailWinDialogVisible.value = true;
    }
  });
}

// 属性侦听
watch(() => props.ledgerId, () => {
    loadLedgerById();
});
</script>

<style scoped>

</style>